<template>
  <div class="">
    <div v-if="!isFormOpen" class="bg-white weui-flex ta-c v-mdl" style="height: 50px;">
      <div class="weui-flex__item" v-if="answers.length == 0 && progress.task && progress.task.isExpired">
        <notify-btn cls="ui btn primary no-rounder" :disabled="true">
          作业已过期
        </notify-btn>
      </div>
      <div v-else class="weui-flex__item pd">
        <notify-btn cls="ui btn empty ta-l c-gray"
          @hit="onReply"
          sty="border: 1px solid #00ADCE;padding: 8px 10px;border-radius: 5px;color: #ccc;">
          请输入
        </notify-btn>
      </div>
      <div style="width: 60px;">
        <button class="ui btn empty" open-type="share" style="display:block;width: 100%;height: 100%;">
          <i class="if icon-share fs-1"></i>
          <div class="fs-6 pdt-s">分享</div>
        </button>
      </div>
      <div style="width: 60px;" @tap.stop="onGoTaskProgresses">
        <button class="ui btn empty" style="display:block;width: 100%;height: 100%;">
          <i class="if icon-users fs-1"></i>
          <div class="fs-6 pdt-s">同学</div>
        </button>
      </div>
    </div>
    <div v-else class="bg-white weui-flex ta-c v-mdl">
      <div class="weui-flex__item">
        <notify-btn cls="ui btn primary no-rounder" @hit="onSubmit" :disabled="!isCreateAble" :loading="isLoading">
          提交
        </notify-btn>
      </div>
      <div style="width: 80px;">
        <notify-btn cls="ui btn empty c-primary" @hit="removeFromOpenFormIds(pageProgressId)">
          取消
        </notify-btn>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import NotifyBtn from '@/components/notify-btn'

export default {
  data() {
    return {
      isShowRoleSwitchPanel: false
    }
  },
  components: {NotifyBtn},
  computed: {
    ...mapGetters('progress', [
      'pageProgressId',
      'isCreateAble',
      'isShowReplyForm',
      'progress',
      'openFormIds'
    ]),
    ...mapGetters('answer', ['answers']),
    ...mapGetters(['role']),
    isFormOpen () {
      return this.openFormIds.indexOf(this.pageProgressId) >= 0
    }
  },
  methods: {
    ...mapActions('progress', [
      'updateIsShowReplyForm',
      'resetTextBlocks',
      'resetMediaBlocks',
      'setMediaBlocks',
      'setTextBlockValue',
      'getIsCreateAble',
      'setUploadQueues',
      'isFormOpen',
      'addToOpenFormIds',
      'removeFromOpenFormIds',
    ]),
    ...mapActions('answer', ['create']),
    ...mapActions('notification', ['enqueue']),
    ...mapActions(['setRole']),
    onGoTaskProgresses() {
      wx.navigateTo({
        url: '/pages/classmates/main?taskId=' + this.progress.task.id
      })
    },
    onReply() {
      let that = this
      if (this.role === 'teacher') {
        wx.showModal({
          content: '你当前状态为【老师】切换为【学生】后才能回复',
          success(res) {
            if (!res.confirm) return
            that.setRole('student')
            that.addToOpenFormIds(that.pageProgressId)
            that.updateIsShowReplyForm(true)
          }
        })
        return
      }
      that.addToOpenFormIds(this.pageProgressId)
      this.updateIsShowReplyForm(true)
    },
    async onSubmit() {
      if (this.isLoading) return
      if (!this.isCreateAble) return
      let progressId = this.$root.$mp.query.progressId
      try {
        this.isLoading = true
        await this.create(progressId)
        this.resetTextBlocks(progressId)
        this.setTextBlockValue()
        this.setMediaBlocks({progressId, blocks: []})
        this.setUploadQueues({progressId, uploadQueue: []})
        this.getIsCreateAble()
        this.removeFromOpenFormIds(progressId)
        this.isLoading = false
      } catch (e) {
        this.isLoading = false
        this.$debug({err: e})
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "../../assets/less/var.less";

i {
  font-size: @fs-xl;
}
</style>
